<template>
	<view class="flex-col page">
		<view class="flex-col group_1">
			<view class="flex-col section_1">
				<view class="justify-between items-center" @click="store_select_show=true">
					<view class="flex-row">
						<text class="text_1">门店选择：</text>
						<text class="text_2">{{store_select_display | substring(16)}}</text>
					</view>
					<image src="@/static/svgicon/right_arrow.svg" class="image_1" />
				</view>
			</view>
			<view class="flex-col list">
				<view v-if="filter_cards.length">
					<view class="list-item flex-col" :key="item.id" v-for="(item, i) in filter_cards"
						@click="toDetailPage(item.id)">
						<view class="top-section justify-between">
							<text class="text_5">{{strSub(item.card_name, 18)}}</text>
							<view class="right-text-wrapper flex-col items-center">
								<text>{{item.card_price}}元</text>
								<!-- <text>16000元</text> -->
							</view>
						</view>
						<view class="center-group flex-col">
							<text>适用门店：{{item.display_store_string | substring(12) }}</text>
							<text class="text_9">适用教室：适用教室数量{{item.roomsCount}}间</text>
						</view>
						<view class="bottom-group justify-between">
							<view class="left-group flex-col">
								<text class="text_14">累计时长：{{item.card_total_hour}}小时 （ {{ (item.card_price / item.card_total_hour).toFixed(2) }} 元每小时 ）</text>
								<text class="text_14">卡有效期：{{item.card_service_term_day}}天</text>
							</view>
							<image src="@/static/assets/16502914363372354647.png" class="image_4" />
						</view>
					</view>

				</view>

				<view v-else class="empty d-flex justify-content-center flex-column align-items-center">
					<image src="../../static/imgs/empty.png" class="img" />
					<view class="text-AAB5BF mt-1 pt-3">暂时没有数据</view>
				</view>

			</view>
			<u-select v-model="store_select_show" :list="store_list" @confirm="storeConfirm"></u-select>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cards: [],
				filter_cards: [],
				store_select_show: false,
				store_select_index: 0,
				store_select_display: '全部',
				store_list: [{
					value: 0,
					label: '全部'
				}],
				all_room_options: [],
				room_select_show: false,
				room_select_index: 0,
				room_select_display: '全部',
				room_list: [{
					value: 0,
					label: '全部'
				}],
			};
		},
		onLoad() {
			let payload = {}
			this.$u.api.getCardsPage(payload)
				.then((res) => {
					if (1 == res.code) {
						this.cards = res.data.cards
						this.filter_cards = res.data.cards
						let store_options = res.data.store_and_room_info.map((e) => {
							return {
								value: e.id,
								label: e.store_name
							}
						})
						this.store_list = [...this.store_list, ...store_options]

						for (let item of res.data.store_and_room_info) {
							this.all_room_options[item.id] = item.rooms.map((e) => {
								return {
									value: e.id,
									label: e.room_name
								}
							})
						}
					}
				})
		},
		methods: {
			toDetailPage(id) {
				this.$u.route({
					url: 'pages/members/voucherDetail?id=' + id
				})
			},
			filterCard() {
				this.filter_cards = this.cards.filter(e => {
					console.log(this.store_select_index);
					if (this.store_select_index) {
						if (e.store_ids.includes("'" + this.store_select_index + "'")) {
							return true;
						} else {
							return false;
						}
					} else {
						return true;
					}
				})
			},
			storeConfirm(e) {
				this.store_select_display = e[0].label
				this.store_select_index = e[0].value

				this.filterCard()
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		
		.empty {
			height: 90vh;
			image {
				width: 288rpx;
				height: 304rpx;
			}
		}

		background-color: rgb(243, 243, 243);
		width: 100%;
		overflow-y: auto;
		height: 100%;



		.group {
			padding: 0 24rpx;
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 600;
			line-height: 40rpx;
			white-space: nowrap;

			.text {
				margin: 6rpx 0;
			}

			.image {
				border-radius: 26rpx;
				width: 156rpx;
				height: 52rpx;
			}
		}

		.group_1 {
			.section_1 {
				padding: 28rpx 24rpx 20rpx;
				background-color: #ffffff;

				.group_4 {
					margin-top: 34rpx;

					.image_3 {
						margin-right: 16rpx;
					}

					.text_3 {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.text_4 {
						margin-left: 12rpx;
						color: rgb(216, 88, 134);
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
						white-space: nowrap;
					}
				}

				.image_2 {
					margin: 6rpx 16rpx 6rpx 0;
				}

				.image_1 {
					width: 56rpx;
					height: 56rpx;
				}

				.text_1 {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_2 {
					margin-left: 12rpx;
					color: rgb(216, 88, 134);
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					white-space: nowrap;
				}
			}

			.list {
				margin-top: 16rpx;
				padding: 20rpx 24rpx;
				background-color: #ffffff;

				.list-item {
					&:first-of-type {
						margin-top: 0;
					}

					margin-top: 20rpx;
					padding-bottom: 20rpx;
					background-image: linear-gradient(90deg,
						rgb(248, 218, 229) 0%,
						rgb(248, 218, 229) 1.65%,
						rgb(248, 193, 201) 64.33%,
						rgb(253, 204, 212) 97.82%,
						rgb(253, 204, 212) 100%);
					border-radius: 8rpx;
					border: solid 20rpx rgb(216, 88, 134);

					.top-section {
						padding: 12rpx 22rpx 12rpx 24rpx;
						background-color: rgb(72, 12, 33);

						.text_5 {
							margin: 8rpx 0;
							color: rgb(255, 255, 255);
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
							white-space: nowrap;
						}

						.right-text-wrapper {
							padding: 4rpx 18rpx 2rpx;
							color: rgb(255, 255, 255);
							font-size: 36rpx;
							font-weight: 600;
							line-height: 50rpx;
							white-space: nowrap;
							background-color: rgb(216, 88, 134);
							border-radius: 28rpx;
							min-width: 150rpx;
							height: 56rpx;
						}
					}

					.center-group {
						margin-right: -40rpx;
						margin-top: 20rpx;
						padding: 0 20rpx;
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 200;
						line-height: 40rpx;
						white-space: nowrap;

						.text_9 {
							margin-top: 12rpx;
						}
					}

					.bottom-group {
						margin-right: -40rpx;
						padding: 0 20rpx;
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 200;
						line-height: 40rpx;
						white-space: nowrap;

						.left-group {
							margin-top: 10rpx;

							.text_14 {
								margin-top: 12rpx;
							}

							.text_12 {
								margin-left: 56rpx;
							}
						}

						.image_4 {
							margin-right: 48rpx;
							margin-bottom: 6rpx;
							border-radius: 50%;
							width: 96rpx;
							height: 96rpx;
						}
					}
				}
			}
		}
	}
</style>
